<template>
	<view>
		<NavBar text='网上问诊' />
		<view style="width: 100%; height: 135rpx;"></view>
		<view class="flx headerStyle">
			<view class="flx2" style="width: 50%; border-right: 1rpx solid #cecece;">
				<view class="fontstyle">按科室找</view>
				<view class="flxAlign">
					<view class="sanjiao"></view>
				</view>
				
			</view>
			<view class="flx2" style="width: 50%;">
				<view class="fontstyle">按疾病找</view>
				<view class="flxAlign">
					<view class="sanjiao"></view>
				</view>
			</view>
		</view>
		<view class="flx1 liststyle" v-for="(item,index) in dortorlist" :key="index">
			<view class="liststyle_left">
				<image :src="item.header"></image>
			</view>
			<view class="liststyle_right">
				<view class="flx1">
					<view class="listname">{{item.name}}</view>
					<view class="listzw">[{{item.zw}}]</view>
				</view>
				<view style="margin-top:20rpx;">
					<view class="listtext">{{item.text}}</view>
					<!-- <view class="listtext">{{item.text}}</view> -->
				</view>
				
				<view class="flx" style="margin-top:20rpx;">
					<view class="listks">
						所属科室：{{item.ks}}
					</view>
					<view class="zx" @click="zx(item)">
						我要咨询
					</view>
				</view>
				<view style="width: 100%; height: 20rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data(){
			return{
				dortorlist:[{
					header:'/static/reservationRegister/userheader.png',
					name:'杨医生',
					zw:'主任医师',
					text:'擅长消化科常见病、疑难病及危重病。',
					ks:'消化科'
				},
				{
					header:'/static/reservationRegister/userheader.png',
					name:'李医生',
					zw:'主任医师',
					text:'擅长内脏科常见病、疑难病及危重病。',
					ks:'内脏科'
				},
				{
					header:'/static/reservationRegister/userheader.png',
					name:'周医生',
					zw:'主任医师',
					text:'擅长呼吸科常见病、疑难病及危重病。',
					ks:'呼吸科'
				}
				]
			}
		},
		methods:{
			zx(item){
				let data = JSON.stringify(item)
				uni.navigateTo({
					url:'/pages/OnlineConsultation/ConsultationDetails?datas=' + data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.headerStyle{
		border-bottom: 1rpx solid #cecece;
		.fontstyle{
			font-size: 30rpx;
			letter-spacing: 1rpx;
			line-height: 80rpx;
		}
		.sanjiao {
			width: 0px;
			height: 0px;
			border-top: 5px solid #cecece;
			border-left: 3px solid transparent;
			border-right: 3px solid transparent;
			border-bottom: 3px solid transparent;
			margin-left:15rpx;
		}
	}
	.liststyle{
		width: 90%;
		margin:0 auto;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #cecece;
		.liststyle_left{
			width: 120rpx;
			height:120rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.liststyle_right{
			width: 70%;
			margin-left:30rpx;
			.listname{
				font-weight: 600;
				color: #333;
			}
			.listzw{
				font-size: 25rpx;
				color: #6594ea;
				text-align: bottom;
				margin-top:5rpx;
				margin-left:30rpx;
			}
			.listtext{
				font-size: 25rpx;
				color: #a5a5a5;
			}
			.listks{
				font-size: 25rpx;
				color: #6594ea;
				line-height: 50rpx;
			}
			.zx{
				width: 120rpx;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #fc8e16;
				color: #fff;
				border-radius: 10rpx;
				font-size: 25rpx;
			}
		}
	}
</style>